<div class="gap-2 header">
  <input type="text" placeholder="Search" [(ngModel)]="searchTerm">

  <a href="https://docs.safing.io/portmaster/settings?source=Portmaster"
    class="flex flex-row items-center justify-center gap-1 px-2 py-1.5 bg-gray-300 rounded hover:bg-gray-200 text-blue whitespace-nowrap">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
      class="w-4 h-4">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
    </svg>
    Get Help
  </a>

  <app-expertise></app-expertise>
</div>

<div class="header-title">
  <h1>
    Global Settings
    <sfng-tipup key="globalSettings"></sfng-tipup>
  </h1>
</div>

<app-settings-view [searchTerm]="searchTerm" [highlightKey]="highlightSettingKey" [availableSettings]="settings"
  (save)="saveSetting($event)">
</app-settings-view>
